<template>
  <div class="user-profile">    <!-- Header Section -->
    <div class="header">
      <div class="header-content">
        <div class="avatar">
          <span class="avatar-text" v-if="!loading">{{ userInfo.name.charAt(0) || '?' }}</span>
          <span class="avatar-text" v-else>?</span>
        </div>
        <div class="user-basic-info">
          <h1 class="username" v-if="!loading">{{ userInfo.name || '加载中...' }}</h1>
          <h1 class="username" v-else>加载中...</h1>
          <p class="email">{{ userInfo.email || '加载中...' }}</p>
          <div class="join-info">
            <span class="join-label">加入时间</span>
            <span class="join-date">{{ userInfo.joinDate || '加载中...' }}</span>
          </div>
        </div>        <button class="edit-profile-btn" @click="toggleEditMode" :disabled="loading || saving">
          {{ saving ? '保存中...' : (isEditing ? '保存更改' : '编辑资料') }}
        </button>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- Personal Information Form -->
      <div class="personal-info-card">
        <h2 class="section-title">个人信息</h2>
        
        <div class="form-grid">          <div class="form-group">
            <label class="form-label">姓名</label>
            <input 
              v-model="userInfo.name" 
              :disabled="!isEditing"
              class="form-input"
              :class="{ 'error': errors.name }"
              type="text"
              placeholder="请输入姓名"
            />
            <span v-if="errors.name" class="error-text">{{ errors.name }}</span>
          </div>
            <div class="form-group">
            <label class="form-label">性别</label>
            <select 
              v-model="userInfo.gender" 
              :disabled="!isEditing"
              class="form-input gender-select"
            >
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">角色</label>
            <div class="form-input role-input">
              <span>{{ userInfo.role }}</span>
              <div class="dropdown-icon"></div>
            </div>
          </div>
            <div class="form-group">
            <label class="form-label">手机号码</label>
            <input 
              v-model="userInfo.phone" 
              :disabled="!isEditing"
              class="form-input phone-input"
              :class="{ 'error': errors.phone }"
              type="tel"
              placeholder="请输入手机号码"
            />
            <span v-if="errors.phone" class="error-text">{{ errors.phone }}</span>
          </div>
          
          <div class="form-group">
            <label class="form-label">邮箱地址</label>
            <input 
              v-model="userInfo.email" 
              :disabled="!isEditing"
              class="form-input email-input"
              :class="{ 'error': errors.email }"
              type="email"
              placeholder="请输入邮箱地址"
            />
            <span v-if="errors.email" class="error-text">{{ errors.email }}</span>
          </div>
          
          <div class="form-group full-width">
            <label class="form-label">个人简介</label>
            <textarea 
              v-model="userInfo.bio" 
              :disabled="!isEditing"
              class="form-textarea"
              rows="4"
            ></textarea>
          </div>
        </div>        <div class="form-actions">
          <button class="btn-secondary" @click="goBack" :disabled="saving">返回</button>
          <button class="btn-secondary" @click="cancelEdit" v-if="isEditing" :disabled="saving">取消</button>
          <button class="btn-primary" @click="saveChanges" v-if="isEditing" :disabled="saving">
            {{ saving ? '保存中...' : '保存更改' }}
          </button>
        </div>
      </div>

      <!-- Right sidebar with Account Security and Quick Actions -->
      <div class="right-sidebar">
        <!-- Account Security -->
        <div class="security-card">
          <h2 class="section-title">账户安全</h2>
            <div class="security-item">
            <div class="security-info">
              <h3 class="security-title">密码</h3>
              <p class="security-subtitle">上次更改于 30 天前</p>
            </div>
            <button class="btn-small" @click="showPasswordModal = true">更改</button>
          </div>
          
          <div class="security-item">
            <div class="security-info">
              <h3 class="security-title">双重认证</h3>
              <p class="security-subtitle">已禁用</p>
            </div>
            <button class="btn-small">启用</button>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions-card">
          <h2 class="section-title">快速操作</h2>
          
          <div class="action-item">
            <div class="action-icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM8 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/>
              </svg>
            </div>
            <div class="action-info">
              <h3 class="action-title">编辑头像</h3>
              <p class="action-subtitle">更换个人头像</p>
            </div>
            <button class="action-btn">
              <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor">
                <path d="M1 1l4 4-4 4"/>
              </svg>
            </button>
          </div>
          
          <div class="action-item">
            <div class="action-icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zM6 7h4v6H6V7z"/>
              </svg>
            </div>
            <div class="action-info">
              <h3 class="action-title">隐私设置</h3>
              <p class="action-subtitle">管理隐私选项</p>
            </div>
            <button class="action-btn">
              <svg width="6" height="10" viewBox="0 0 6 10" fill="currentColor">
                <path d="M1 1l4 4-4 4"/>
              </svg>
            </button>
          </div>      </div>
    </div>    <!-- Password Change Modal -->
    <div v-if="showPasswordModal" class="modal-overlay" @click="closePasswordModal">
      <div class="modal-content" @click.stop>
        <div class="form-register">
          <div class="modal-header">
            <h3>修改密码</h3>
            <button class="close-btn" @click="closePasswordModal">×</button>
          </div>
          
          <div class="input-field">
            <div class="label"><span class="label_span">新密码</span></div>
            <div class="input">
              <input 
                type="password" 
                v-model="newPassword" 
                placeholder="请输入新密码"
                class="password-input"
                :disabled="passwordSaving"
              />
            </div>
          </div>
          
          <div class="input-field_01">
            <div class="label_01"><span class="label_01_span">确认新密码</span></div>
            <div class="input_01">
              <input 
                type="password" 
                v-model="confirmPassword" 
                placeholder="请再次输入新密码"
                class="password-input"
                :disabled="passwordSaving"
              />
            </div>
          </div>
          
          <div class="button-group">
            <button class="button-cancel" @click="closePasswordModal" :disabled="passwordSaving">取消</button>
            <div class="button" @click="changePassword" :disabled="passwordSaving">
              <div><span class="button_01_span">{{ passwordSaving ? '修改中...' : '修改密码' }}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { getUserByIdAPI } from '../apis/userAPI/getUserByIdAPI.ts'
import { updateUserAPI } from '../apis/userAPI/updateUserAPI.ts'
import { resetPasswordAPI } from '../apis/userAPI/resetPasswordAPI.ts'

export default {
  name: 'UserProfile',  data() {
    return {
      isEditing: false,
      loading: true,
      saving: false,
      showPasswordModal: false,
      newPassword: '',
      confirmPassword: '',
      passwordSaving: false,
      userInfo: {
        name: '',
        email: '',
        joinDate: '',
        gender: '',
        role: '',
        phone: '',
        bio: ''
      },
      originalUserInfo: {},
      errors: {
        name: '',
        email: '',
        phone: ''
      }
    }
  },
  async mounted() {
    await this.loadUserInfo()
  },  methods: {    async loadUserInfo() {
      try {
        this.loading = true
        // 从localStorage获取当前用户ID
        const userId = localStorage.getItem('id')
        if (!userId) {
          console.error('未找到用户ID，请重新登录')
          this.$router.push('/login')
          return
        }
        
        const response = await getUserByIdAPI(parseInt(userId))
        
        if (response.code === 200 || response.code === 0) {
          const userData = response.data
          this.userInfo = {
            name: userData.username,
            email: userData.email,
            joinDate: this.formatDate(userData.createdAt),
            gender: userData.gender ? '男' : '女',
            role: userData.role,
            phone: userData.phone || '',
            bio: userData.bio || ''
          }
        } else {
          console.error('获取用户信息失败:', response.message)
        }
      } catch (error) {
        console.error('获取用户信息出错:', error)
      } finally {
        this.loading = false
      }
    },    formatDate(dateObj) {
      // 格式化日期对象为"YYYY年MM月"格式
      if (!dateObj) return '未知'
      
      try {
        // 处理不同的日期格式
        let date
        
        if (typeof dateObj === 'string') {
          // 如果是字符串格式的日期
          date = new Date(dateObj)
        } else if (dateObj instanceof Date) {
          // 如果已经是Date对象
          date = dateObj
        } else if (typeof dateObj === 'object') {
          // 如果是对象格式，尝试提取年月信息
          if (dateObj.year && dateObj.month) {
            return `${dateObj.year}年${dateObj.month}月`
          } else if (dateObj.date || dateObj.time) {
            // 如果有date或time字段
            const dateStr = dateObj.date || dateObj.time
            date = new Date(dateStr)
          } else {
            // 尝试直接转换对象
            date = new Date(JSON.stringify(dateObj))
          }
        } else {
          return '未知'
        }
        
        if (date && !isNaN(date.getTime())) {
          const year = date.getFullYear()
          const month = date.getMonth() + 1
          return `${year}年${month}月`
        }
        
        return '未知'
      } catch (error) {
        console.error('日期格式化错误:', error)
        return '未知'      }
    },
    validateForm() {
      // 清空之前的错误
      this.errors = { name: '', email: '', phone: '' }
      let isValid = true

      // 验证姓名
      if (!this.userInfo.name || this.userInfo.name.trim().length === 0) {
        this.errors.name = '姓名不能为空'
        isValid = false
      } else if (this.userInfo.name.trim().length > 50) {
        this.errors.name = '姓名长度不能超过50个字符'
        isValid = false
      }

      // 验证邮箱
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.userInfo.email || this.userInfo.email.trim().length === 0) {
        this.errors.email = '邮箱不能为空'
        isValid = false
      } else if (!emailRegex.test(this.userInfo.email)) {
        this.errors.email = '请输入有效的邮箱地址'
        isValid = false
      }

      // 验证手机号（如果填写了的话）
      if (this.userInfo.phone && this.userInfo.phone.trim().length > 0) {
        const phoneRegex = /^1[3-9]\d{9}$/
        if (!phoneRegex.test(this.userInfo.phone)) {
          this.errors.phone = '请输入有效的手机号码'
          isValid = false
        }
      }

      return isValid
    },
    toggleEditMode() {
      if (this.isEditing) {
        this.saveChanges()
      } else {
        this.originalUserInfo = { ...this.userInfo }
        this.isEditing = true
      }
    },    async saveChanges() {
      // 验证表单
      if (!this.validateForm()) {
        return
      }

      try {
        this.saving = true
        const userId = localStorage.getItem('id')
        if (!userId) {
          console.error('未找到用户ID')
          return
        }

        // 准备更新参数，需要将性别字符串转换为布尔值
        const updateParams = {
          username: this.userInfo.name.trim(),
          email: this.userInfo.email.trim(),
          gender: this.userInfo.gender === '男',
          phone: this.userInfo.phone.trim(),
          bio: this.userInfo.bio.trim()
        }

        const response = await updateUserAPI(parseInt(userId), updateParams)
        
        if (response.code === 200 || response.code === 0) {
          console.log('用户信息保存成功')
          this.isEditing = false
          // 清空错误信息
          this.errors = { name: '', email: '', phone: '' }
          // 重新加载用户信息以确保显示最新数据
          await this.loadUserInfo()
        } else {
          console.error('保存用户信息失败:', response.message)
          alert('保存失败：' + response.message)
        }
      } catch (error) {
        console.error('保存用户信息出错:', error)
        alert('保存失败，请稍后重试')
      } finally {
        this.saving = false
      }
    },cancelEdit() {
      this.userInfo = { ...this.originalUserInfo }
      this.isEditing = false
      // 清空错误信息
      this.errors = { name: '', email: '', phone: '' }    },
    goBack() {
      // 这里可以添加路由返回逻辑
      this.$router?.go(-1)
    },    closePasswordModal() {
      this.showPasswordModal = false
      this.newPassword = ''
      this.confirmPassword = ''
    },
    
    async changePassword() {
      // 验证新密码
      if (!this.newPassword || this.newPassword.trim().length === 0) {
        alert('请输入新密码')
        return
      }
      
      if (this.newPassword.length < 6) {
        alert('密码长度不能少于6位')
        return
      }
      
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }
      
      try {
        this.passwordSaving = true
        const userId = localStorage.getItem('id')
        if (!userId) {
          alert('未找到用户ID，请重新登录')
          return
        }
        
        const response = await resetPasswordAPI(parseInt(userId), this.newPassword)
        
        if (response.code === 200 || response.code === 0) {
          alert('密码修改成功')
          this.closePasswordModal()
        } else {
          alert('密码修改失败：' + response.message)
        }
      } catch (error) {
        console.error('修改密码出错:', error)
        alert('密码修改失败，请稍后重试')
      } finally {
        this.passwordSaving = false
      }
    }
  }
}
</script>

<style scoped>
.user-profile {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  background: linear-gradient(90deg, #E2E8F0 100%, #F8FAFC 0%);
}

.header {
  width: 100%;
  height: 130px;
  background: linear-gradient(90deg, #1E1E1E 100%, #2C2C2C 0%);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  position: relative;
}

.header-content {
  max-width: 2072px;
  margin: 0 auto;
  padding: 36px 52px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
}

.avatar {
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-text {
  color: #2C2C2C;
  font-size: 32px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 48px;
}

.user-basic-info {
  flex: 1;
  padding-top: 2px;
}

.username {
  color: white;
  font-size: 22px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 0px;
  margin: 0 0 15px 0;
}

.email {
  color: #B3B3B3;
  font-size: 20px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 30px;
  margin: 0 0 16px 0;
}

.join-info {
  display: flex;
  gap: 8px;
}

.join-label {
  color: #B3B3B3;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 24px;
}

.join-date {
  color: #B3B3B3;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 24px;
}

.edit-profile-btn {
  position: absolute;
  top: 40px;
  right: 52px;
  width: 180px;
  height: 45px;
  background: white;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  border: none;
  color: #2C2C2C;
  font-size: 18px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-profile-btn:hover {
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
}

.edit-profile-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.content-wrapper {
  padding: 49px 52px 32px;
  display: grid;
  grid-template-columns: 1fr 363px;
  gap: 41px;
  max-width: 1272px;
  margin: 0 auto;
}

.personal-info-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #D9D9D9;
  padding: 32px;
}

.section-title {
  color: #1E1E1E;
  font-size: 24px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 36px;
  margin: 0 0 32px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 24px;
  margin-bottom: 40px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  color: #1E1E1E;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  line-height: 21px;
}

.form-input {
  height: 52px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  padding: 0 16px;
  font-size: 16px;
  font-family: Inter, sans-serif;
  color: black;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #1E1E1E;
}

.form-input:disabled {
  background: #F8FAFC;
  color: #666;
}

.form-input.error {
  border-color: #ef4444;
}

.error-text {
  color: #ef4444;
  font-size: 12px;
  font-family: Inter, sans-serif;
  margin-top: 4px;
}

.gender-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.gender-select:disabled {
  background-image: none;
}

.role-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.dropdown-icon {
  width: 8px;
  height: 8px;
  border: 1px solid black;
  border-radius: 1px;
}

.phone-input {
  grid-column: 1 / 3;
}

.email-input {
  grid-column: 3;
}

.form-textarea {
  min-height: 140px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  padding: 16px;
  font-size: 16px;
  font-family: Inter, sans-serif;
  color: black;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.form-textarea:focus {
  outline: none;
  border-color: #1E1E1E;
}

.form-textarea:disabled {
  background: #F8FAFC;
  color: #666;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-secondary {
  width: 81px;
  height: 49px;
  background: white;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  color: #2C2C2C;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.10);
}

.btn-primary {
  width: 112px;
  height: 49px;
  background: linear-gradient(90deg, #1E1E1E 100%, #2C2C2C 0%);
  box-shadow: 0px 4px 15px rgba(44, 44, 44, 0.30);
  border-radius: 12px;
  border: none;
  color: white;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0px 6px 20px rgba(44, 44, 44, 0.40);
}

.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.security-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #D9D9D9;
  padding: 24px;
  height: fit-content;
}

.security-card .section-title {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 24px;
}

.security-item {
  padding: 16px 0;
  border-bottom: 0.67px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.security-item:last-child {
  border-bottom: none;
}

.security-title {
  color: #1E1E1E;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 4px 0;
}

.security-subtitle {
  color: #B3B3B3;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
}

.btn-small {
  width: 61px;
  height: 38px;
  background: white;
  border-radius: 8px;
  border: 1px solid #D9D9D9;
  color: #2C2C2C;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-small:hover {
  background: #F8FAFC;
}

.quick-actions-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #D9D9D9;
  padding: 24px;
  height: fit-content;
}

.quick-actions-card .section-title {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 24px;
}

.action-item {
  height: 78px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  padding: 19px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-item:last-child {
  margin-bottom: 0;
}

.action-item:hover {
  background: #F1F5F9;
}

.action-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg, #1E1E1E 100%, #2C2C2C 0%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.action-info {
  flex: 1;
}

.action-title {
  color: #1E1E1E;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 4px 0;
}

.action-subtitle {
  color: #B3B3B3;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
}

.action-btn {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: #B3B3B3;
  cursor: pointer;  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  z-index: 1001;
}

/* Password Form Styles */
.form-register {
  width: 320px;
  min-width: 320px;
  padding: 24px;
  background: var(--Background-Default-Default, white);
  border-radius: 8px;
  outline: 1px var(--Border-Default-Default, #D9D9D9) solid;
  outline-offset: -1px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  display: inline-flex;
}

.modal-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.modal-header h3 {
  margin: 0;
  color: #1E1E1E;
  font-size: 18px;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #B3B3B3;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #F1F5F9;
  color: #1E1E1E;
}

.input-field {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.input-field_01 {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.label {
  align-self: stretch;
}

.label_span {
  color: var(--Text-Default-Default, #1E1E1E);
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 22.40px;
  word-wrap: break-word;
}

.input {
  align-self: stretch;
  min-width: 240px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--Background-Default-Default, white);
  overflow: hidden;
  border-radius: 8px;
  outline: 1px var(--Border-Default-Default, #D9D9D9) solid;
  outline-offset: -0.50px;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.value {
  flex: 1 1 0;
}

.value_span {
  color: var(--Text-Default-Tertiary, #B3B3B3);
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 16px;
  word-wrap: break-word;
}

.label_01 {
  align-self: stretch;
}

.label_01_span {
  color: var(--Text-Default-Default, #1E1E1E);
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 22.40px;
  word-wrap: break-word;
}

.input_01 {
  align-self: stretch;
  min-width: 240px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--Background-Default-Default, white);
  overflow: hidden;
  border-radius: 8px;
  outline: 1px var(--Border-Default-Default, #D9D9D9) solid;
  outline-offset: -0.50px;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.value_01 {
  flex: 1 1 0;
}

.value_01_span {
  color: var(--Text-Default-Tertiary, #B3B3B3);
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 16px;
  word-wrap: break-word;
}

.button-group {
  align-self: stretch;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: inline-flex;
}

.button-cancel {
  padding: 12px 16px;
  background: white;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  color: #2C2C2C;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-cancel:hover {
  background: #F8FAFC;
}

.button {
  padding: 12px 16px;
  background: var(--Background-Brand-Default, #2C2C2C);
  overflow: hidden;
  border-radius: 8px;
  border: none;
  outline: 1px var(--Border-Brand-Default, #2C2C2C) solid;
  outline-offset: -1px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button:hover {
  background: #1E1E1E;
}

.button_01_span {
  color: var(--Text-Brand-On-Brand, #F5F5F5);
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 16px;
  word-wrap: break-word;
}

.password-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: Inter;
  color: #1E1E1E;
  line-height: 16px;
}

.password-input::placeholder {
  color: var(--Text-Default-Tertiary, #B3B3B3);
}

.password-input:disabled {
  color: #B3B3B3;
  cursor: not-allowed;
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>